<template>
  <div>
    <el-form ref="ruleForm" label-position="right" size="small" label-width="100px" class="base-search-more">
       <el-row>
        <el-col :span="6" v-if="$store.state.showAgent">
          <el-form-item label="区域">
            <el-select style="width:100%" v-model="params.agentId" filterable clearable default-first-option
              placeholder="--区域--" @change="changeId">
              <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属BD">
            <el-select style="width: 100%" @change="getData()" :disabled="$store.state.type === 5" v-model="params.bdId" filterable clearable placeholder="--所属BD--">
              <el-option v-for="items in businessDevelopmentList" :key="'businessDevelopmentList'+items.id" :label="items.name" :value="items.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="$store.state.showAgent? 12: 18" style="text-align:right;">
          <el-form-item label-width="0">
            <el-button type="primary" icon="el-icon-search" @click="getData()">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="time-change">
      <el-radio-group v-model="params.type" size="small" @change="getData()">
        <el-radio-button :label="1">今日</el-radio-button>
        <el-radio-button :label="2">本周</el-radio-button>
        <el-radio-button :label="3">本月</el-radio-button>
      </el-radio-group>
    </div>
    <div class="class-type">
      <span class="name">{{params.type|dataType}}订单</span>
      <span class="sub">(截至{{dataTime.endString}}止)</span>
    </div>
    <div class="item-wrap">
      <div class="item" v-for="item in dataTime.item1" :key="item.name">
        <div class="title">{{item.name}}</div>
        <div class="num">{{item.num}}</div>
        <div class="desc">环比{{params.type|lastType}}同期:
          <i :class="item.isUp ? 'up' : 'down'">{{item.isUp ? '↑' : '↓'}}</i>
          <span class="rus" :class="item.isUp ? 'up' : 'down'">{{item.desc}}</span>
        </div>
      </div>
    </div>
    <div class="class-type">
      <span class="name">{{params.type|dataType}}营业额</span>
      <span class="sub">(截至{{dataTime.endString}}止)</span>
    </div>
    <div class="item-wrap">
      <div class="item" v-for="item in dataTime.item2" :key="item.name">
        <div class="title">{{item.name}}</div>
        <div class="num">{{item.num}}</div>
        <div class="desc">环比{{params.type|lastType}}同期:
          <i :class="item.isUp ? 'up' : 'down'">{{item.isUp ? '↑' : '↓'}}</i>
          <span class="rus" :class="item.isUp ? 'up' : 'down'">{{item.desc}}</span>
        </div>
      </div>
    </div>
    <div class="class-type">
      <span class="name">{{params.type|dataType}}营销概况</span>
      <span class="sub">(截至{{dataTime.endString}}止)</span>
    </div>
    <div class="item-wrap">
      <div class="item" v-for="item in dataTime.item3" :key="item.name">
        <div class="title">{{item.name}}</div>
        <div class="num">{{item.num}}</div>
        <div class="desc">环比{{params.type|lastType}}同期:
          <i :class="item.isUp ? 'up' : 'down'">{{item.isUp ? '↑' : '↓'}}</i>
          <span class="rus" :class="item.isUp ? 'up' : 'down'">{{item.desc}}</span>
        </div>
      </div>
    </div>
    <pt-table-loading v-show="isloadingTable" />
  </div>
</template>
<script>
  import { businessDevelopment } from '@/api/busnt.js'
  import { moreData } from '@/api/data.js'
  export default {
    data() {
      return {
        params: {
          agentId: '',  //被选区域
          bdId: null,
          type: 1
        },
        isloadingTable: false,
        businessDevelopmentList: [], // bd数据
        dataTime: {
          endString: '----',
          item1: [],
          item2: [],
          item3: []
        }, 
      }
    },
    filters: {
      dataType(val) {
        const type = ['今日', '本周', '本月']
        return type[val -1]
      },
      lastType(val) {
        const type = ['昨日', '上周', '上月']
       return type[val -1]
      }
    },
    computed: {
      restaurants() { // 区域据
        return this.$store.state.agentList
      }
    },
    watch: {
      restaurants: {
        handler(val) {
          if (val && val.length ===1) {
            this.params.agentId = val[0].id
          }
        },
        deep: true
      },
      'params.agentId': {
        handler(val) {
          if (val) {
            this.getBusinessDevelopment(val)
          } else {
            this.businessDevelopmentList = []
          }
        },
        deep: true
      },
      '$store.state.screenRice': {
        handler(val) {
          if (this.myChart) {
            this.myChart.resize()
          }
        },
        deep: true
      }
    },
    methods: {
      getBusinessDevelopment(agentId) { // 获取BD数据
        businessDevelopment({ agentId }).then(res => {
          if (res.success) {
            this.businessDevelopmentList = res.data
            if (this.$store.state.type === 5) this.params.bdId = this.businessDevelopmentList[0].id || ''
          }
        })
      },
      changeId() { // 切换代理
        this.params.bdId = null
        this.getData()
      },
      getData() {
        const params = { ...this.params }
        this.isloadingTable = true
        moreData(params).then(res => {
          if (res.success) {
            this.dataTime = res.data
          }
        }).finally(() => { this.isloadingTable = false  })
      }
    },
    mounted() {
      if (this.restaurants && this.restaurants.length === 1) {
        this.params.agentId = this.restaurants[0].id
      }
      this.getData()
    }
  }
</script>
<style lang="scss" scoped>
  .time-change{
    display: flex;
    justify-content: center;
    padding: 0 15px;
  }
  .class-type{
    line-height: 40px;
    padding: 0 15px;
    border-bottom: 1px solid #ccc;
    .name{
      font-weight: bold;
    }
    .sub{
      color: #999;
    }
  }
  .item-wrap {
    display: flex;
    flex-flow: row wrap;
    .item{
      padding: 20px;
      .title{
        line-height: 40px;
        font-weight: 700;
      }
      .num{
        line-height: 50px;
        font-size: 24px;
        font-weight: 700;
      }
      .desc{
        line-height: 30px;
        color: #909399;
        i,.rus{
          &.down {
            color: #fe6a6a;
          }
          &.up {
            color: #11cd6f;
          }
        }
        i{
          margin: 0 5px;
        }
      }
    }
   }
</style>
